import React from "react"
import { flushSync } from "react-dom"

class Demo extends React.Component {
    state = {
        x: 0,
        y: 23,
    }

    // handle = () => {
    //     // 需求页面更新20次，数据更新
    //     for (let i = 0; i < 20; i++) {
    //         // flushSync(() => {
    //         //     this.setState({
    //         //         x: this.state.x + 1,
    //         //     })
    //         // })

    //         this.setState({
    //             x: this.state.x + 1,
    //         })
    //         flushSync()
    //     }
    // }

    // 需求，页面更新一次，数据为20
    handle = () => {
        for (let i = 0; i < 20; i++) {
            this.setState((pre) => {
                return {
                    x: pre.x + 1,
                }
            })
        }
    }

    change = (x, ev) => {
        console.log(x)
    }

    render() {
        console.log("视图渲染")
        const { x } = this.state
        return (
            <div>
                x:{x}
                <button onClick={this.handle}>按钮</button>
                <button onClick={this.change.bind(null, 10)}>按钮1</button>
            </div>
        )
    }
}

export default Demo
